// Avatar

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin avatar {
  font-size: $--x-font-size;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: $--x-background-100;
  background-color: $--x-text-500;
  > img {
    display: block;
    height: 100%;
  }
  &-circle {
    border-radius: 50%;
  }
  &-square {
    border-radius: $--x-border-radius;
  }
  &-error {
    > img {
      height: initial;
    }
  }
  @include avatar-size('big', $--x-avatar-size-big);
  @include avatar-size('large', $--x-avatar-size-large);
  @include avatar-size('medium', $--x-avatar-size-medium);
  @include avatar-size('small', $--x-avatar-size-small);
  @include avatar-size('mini', $--x-avatar-size-mini);
}

@mixin avatar-size($type, $size) {
  &-#{$type} {
    height: $size;
    width: $size;
    line-height: $size;
    font-size: $size * 0.6;
  }
}
